import React, { useEffect, useState } from "react";
import "@/assets/css/rank.scss";
import HeadBack from "@/components/HeadBack";
import rankImg from "@/assets/images/rankImg.png";
import onesImg from "@/assets/images/onesImg.png";
import twosImg from "@/assets/images/twosImg.png";
import ThreesImg from "@/assets/images/ThreesImg.png";
import { useLocation } from "react-router-dom";
import { lookSportRanking } from "@/utils/dataUtil";
import { Image } from "antd-mobile";

const tabArr = [
    { title: "卡路里", type: 1, click: false },
    { title: "步数", type: 2, click: true },
    { title: "中高强度活动时长", type: 3, click: false },
];

const buildTabMethod = (tabType) => {
    let currentIndex = tabArr.findIndex((item) => item.type === tabType);
    let currentTabs = JSON.parse(JSON.stringify(tabArr));
    currentTabs.forEach((item, index) => {
        item.click = false;
    });

    currentTabs[currentIndex].click = true;
    return currentTabs;
};
export default function Rank() {
    const params = useLocation();

    const [selfkcalRanks, setSelfkcalRanks] = useState([]);

    const [employeeId] = useState(params.state.id);

    const [ranks, setRanks] = useState([]);

    const [tabIndex, setTabIndex] = useState(params.state.tab);

    //排行榜的tab
    const [tabs, setTabs] = useState(tabArr);

    //点击tab事件
    const clickTab = (index) => {
        setTabs((item) => {
            let currentTabs = JSON.parse(JSON.stringify(item));
            currentTabs.forEach((element) => {
                element.click = false;
            });
            currentTabs[index].click = !currentTabs[index].click;
            item = currentTabs;
            return item;
        });

        setTabIndex(index + 1);
    };

    useEffect(() => {
        lookSportRanking(tabIndex).then((res) => {
            setSelfkcalRanks(
                res.data.filter((item) => item.employeeId === employeeId)
            );
            setRanks(res.data);
        });
    }, [tabIndex]);

    useEffect(() => {
        setTabs(buildTabMethod(tabIndex));
    }, []);

    return (
        <>
            <HeadBack
                background={"transparent"}
                backTit={"今日运动数据排行榜"}
                isHome="back"
            ></HeadBack>
            {/* 内容部分 */}
            <div className="rankContainer">
                {/* 详情封面 */}
                <div className="rankBanner">
                    <Image src={rankImg} width={"100%"} height={"6.97rem"} fit="cover" />
                </div>

                <div className="rankContent">
                    {/* tab */}
                    <div className="rankTab">
                        {tabs.map((item, index) => (
                            <div
                                key={index}
                                className={item.click ? "rankTabLiCur" : "rankTabLi"}
                                onClick={() => clickTab(index)}
                            >
                                {item.title}
                            </div>
                        ))}
                    </div>

                    {/* 自己的排行榜 */}
                    <div className="rankSelfBox">
                        {selfkcalRanks.map((item, index) => (
                            <div className="rankSelf" key={index}>
                                <div className="rankSelfLeft">
                                    {item.rank <= 3 && (
                                        <img
                                            className="rankSelfImg"
                                            src={
                                                item.rank === 1
                                                    ? onesImg
                                                    : item.rank === 2
                                                        ? twosImg
                                                        : ThreesImg
                                            }
                                            alt=""
                                        />
                                    )}
                                    {item.rank > 3 && (
                                        <span className="rankSelfCount">{item.rank}</span>
                                    )}

                                    <span className="rankSelfTxt">我自己</span>
                                </div>
                                <div className="rankSelfRight">
                                    {tabIndex === 1 && (
                                        <span>
                                            <span className="rankSelfRightNum">{item.kcal}</span>
                                            <span className="rankSelfRightUnit">kcal</span>
                                        </span>
                                    )}

                                    {tabIndex === 2 && (
                                        <span>
                                            <span className="rankSelfRightNum">{item.steps}</span>
                                            <span className="rankSelfRightUnit">步</span>
                                        </span>
                                    )}
                                    {tabIndex === 3 && (
                                        <span>
                                            <span className="rankSelfRightNum">{item.intensity}</span>
                                            <span className="rankSelfRightUnit">分钟</span>
                                        </span>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* 自己的排行榜 */}
                    {ranks.length !== 0 && (
                        <div className="rankSelfBox">
                            {ranks.map((item, index) => (
                                <div className="rankSelf rankOther" key={index}>
                                    <div className="rankSelfLeft">
                                        {item.rank <= 3 && (
                                            <img
                                                className="rankSelfImg"
                                                src={
                                                    item.rank === 1
                                                        ? onesImg
                                                        : item.rank === 2
                                                            ? twosImg
                                                            : ThreesImg
                                                }
                                                alt=""
                                            />
                                        )}

                                        {item.rank > 3 && (
                                            <span className="rankSelfCount">{item.rank}</span>
                                        )}

                                        <span className="rankSelfTxt">{item.employeeName}</span>
                                    </div>
                                    <div className="rankSelfRight">
                                        {tabIndex === 1 && (
                                            <span>
                                                <span className="rankSelfRightNum">{item.kcal}</span>
                                                <span className="rankSelfRightUnit">kcal</span>
                                            </span>
                                        )}

                                        {tabIndex === 2 && (
                                            <span>
                                                <span className="rankSelfRightNum">{item.steps}</span>
                                                <span className="rankSelfRightUnit">步</span>
                                            </span>
                                        )}
                                        {tabIndex === 3 && (
                                            <span>
                                                <span className="rankSelfRightNum">
                                                    {item.intensity}
                                                </span>
                                                <span className="rankSelfRightUnit">分钟</span>
                                            </span>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}

                    <div className="rankEmpty">- 没有更多了 -</div>
                </div>
            </div>
        </>
    );
}
